<template>
  <div class="box">
    <int :info="info"></int>
    <!-- <h1>疾病知识</h1> -->
    <div class="exp">
      <Search @search="searchFn"></Search>
      <div class="content">
        <p>
          当前共<span>{{ count }}</span
          >个结果
        </p>
        <div>
          <el-row>
            <el-col
              :span="5"
              v-for="(item, index) in disList"
              :key="item.id"
              :class="(index + 1) % 4 == 0 ? 'disitem ri-mar' : 'disitem'"
              @click.native="knowledgeDetail(item.id)"
            >
              <div class="imgbox" @click="knowledgeDetail(item.id)">
                <img :src="item.img" alt="" />
              </div>
              <h1>{{ item.title }}</h1>
              <div class="label">
                <span
                  v-for="(item2, index) in item.tag && item.tag.split(',')"
                  :key="item2"
                  :class="colorArr[index % 4]"
                  >{{ item2 }}</span
                >
              </div>
              <el-row> </el-row>
              <el-row class="bot">
                <el-col :span="20" class="cont">{{ item.time }}</el-col>
                <el-col
                  :span="4"
                  class="icon"
                  @click.native.stop="collection(item)"
                >
                  <i
                    v-show="!item.isCollection"
                    class="iconfont icon-shoucang"
                  ></i>
                  <i
                    v-show="item.isCollection"
                    class="iconfont icon-shoucang1"
                  ></i>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          class="fenye"
          :pageSize="8"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
      <!-- <div :class="colorArr[parseInt(Math.random() * 5)]" v-for="item in 8" :key="item">标签</div> -->
    </div>
    <el-row class="centop">
      <el-col :span="4">
        <span class="acspan">经验推荐</span>
      </el-col>
      <el-col :span="3" :offset="17"> </el-col>
    </el-row>
    <div class="exp">
      <keep-alive>
        <Exprec></Exprec>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Int from "../components/Int.vue";
import Search from "./../components/searchandlist.vue";
import Exprec from "../components/Exprec.vue";
export default {
  components: {
    Int,
    Search,
    Exprec,
  },
  data() {
    return {
      info: {
        name: "疾病知识",
        enName: "Disease knowledge",
        text: "方便让用户了解疾病全方位的信息，对疾病更加了解。",
        enText:
          "It is convenient for users to understand the comprehensive information of the disease and have a better understanding of the disease",
        img: require("../assets/s2.png"),
      },
      count: null, //结果总数
      currentDate: "2022-2-16",
      // colorArr: ["mi", "bi", "yi", "ri", "gi"],
      disList: [
        {
          id: 1,
          name: "高血压的危害",
          img: "http://5b0988e595225.cdn.sohucs.com/images/20181030/04c9a600df8d4771839c37e69a38b8e9.jpeg",
          label: ["内科", "心血管内科", "胸部"],
          cont: "临床以发作性中重度、搏动样头痛为主要表现，一般持续4～72小时，可伴有恶心、呕吐，光...",
          isLike: false,
        },
      ],
      colorArr: ["bi-bg", "yi-bg", "ri-bg", "gi-bg"],
      classifyId: null, //搜索类别id
      title: null, //搜索内容
    };
  },
  computed: {
    cla() {
      //一级分类
      return this.state == 1 ? this.staCla.pos : this.staCla.dep;
    },
  },
  methods: {
    //改变页数
    changePage(page) {
      this.$axios({
        url: "knowledge/selectAll",
        method: "get",
        params: {
          page: page,
          size: 8,
          title: this.title,
          classifyId: this.classifyId,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.disList = res.data;
          this.count = res.count;
        }
      });
    },
    knowledgeDetail(id) {
      // console.log(id)
      this.$router.push({ path: "/main/KnowledgeDetail", query: { id: id } });
    },
    //搜索,type=2是为按类别查询
    searchFn(con, type, sea, id) {
      if (type == 2) {
        this.classifyId = id;
        this.title = sea;
      } else {
        this.title = con;
      }
      this.$axios({
        url: "/knowledge/selectAll",
        method: "get",
        params: {
          page: 1,
          size: 8,
          title: this.title,
          classifyId: this.classifyId,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.disList = res.data;
          this.count = res.count;
        }
      });
    },
    //收藏
    collection(data) {
      console.log(data);
      let allData = {
        targetId: data.id,
        status: data.isCollection == false ? 1 : -1,
        type: 3,
      };
      this.$store.dispatch("collection", allData).then((res) => {
        this.disList.forEach((item) => {
          if (item.id == data.id) {
            item.isCollection = !item.isCollection;
          }
        });
      });
    },
  },
  created() {
    this.$axios({
      url: "knowledge/selectAll",
      method: "get",
      params: {
        page: 1,
        size: 8,
      },
    }).then((res) => {
      console.log(res);
      if (res.code == "200") {
        this.disList = res.data;
        this.count = res.count;
      }
    });
  },
};
</script>

<style lang="less" scoped>
@import url("../less/knowledge.less");
.exp {
  padding-top: 30px;

  width: 100%;
  background-color: #f2f7fb;
  & > div {
    width: 1200px;
    margin: 0 auto;
  }
}
.box {
  background-color: #f2f7fb;
}
.centop {
  width: 1200px;
  margin: 0 auto;
}
</style>

